<template>
  <div><!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/nav' }">组织管理</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/nav/forms">表单管理</a></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索 -->
  <div class="user-content">
    <!-- 搜索下的按钮 -->
    <div class="newAdd">
      <!-- 新增菜单 -->
      <button @click="addEdit('add','')" class="addBtn">新增轮播图</button>
      <el-drawer ref="drawerRef" v-model="dialog" title="新增轮播图" :before-close="handleClose" direction="rtl"
        class="demo-drawer">
        <div class="demo-drawer__content">
          <el-form :model="form" :rules="rules"  ref="formRef">
            <el-form-item label="封面" prop="name" :label-width="formLabelWidth">
              <!-- 上传 -->
              <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :show-file-list="false" :on-success="handleAvatarSuccess">
                <!-- :before-upload="beforeAvatarUpload" -->
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <span style="font-size: 20px;">{{ '选择图片' }}</span>
                </el-icon>
              </el-upload>
            </el-form-item>
            <!-- 文本域 -->
            <el-form-item label="描述" :label-width="formLabelWidth" prop="desc">
              <el-input v-model="form.desc" type="textarea" placeholder="请输入轮播图描述"/>
            </el-form-item>
            <el-form-item label="关联靶场" :label-width="formLabelWidth" style="display: flex;" prop="guan">
              <el-input v-model="form.guan"  placeholder="请选择关联靶场"/>
              <el-button style="width: 20px;">选择</el-button>
            </el-form-item>
          </el-form>

          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取消</el-button>
            <el-button type="primary" :loading="loading" @click="onClick(formRef)">{{
              loading ? '提交中' : '提交'
            }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <!-- 表格 -->
    <div class="list-item">
      <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
        :tree-props="{ children: 'children' }">
        <el-table-column prop="date" label="封面">
          <template #default="scope">
            <img :src="scope.row.image" alt="" style="width: 35px;">
          </template>
        </el-table-column>
        <el-table-column prop="describe" label="描述">

        </el-table-column>
        <el-table-column prop="rid" label="关联的信息（靶场）">
          <template #default="scope">
            靶场{{ scope.row.rid }}
          </template>
        </el-table-column>
        <el-table-column prop="auth" label="状态">
          <template #default="scope">
            <span :class="scope.row.state==0?'':'classColor'">{{ scope.row.state == 0 ? '正常' : '已禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="play" label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleDelete(scope.row)">停用</el-button>
            <el-button  @click="del(scope.row)">删除</el-button>
            <el-button size="small" type="primary" @click="addEdit('edit',scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
 
</template>
  
<script lang='ts' setup>

import { reactive, ref, onMounted } from 'vue'
import { ElDrawer, ElMessageBox, ElMessage } from 'element-plus'
import { findSwipperApi } from "./../../apis/user.js"
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps ,FormInstance} from 'element-plus'
import { add } from 'lodash'
const formRef = ref<FormInstance>()


const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

function addEdit(v:any,n:any){
    if(v=='add'){
        dialog.value=true;
    }else if(v=='edit'){
    
      form.desc=n.describe;
      form.guan=n.rid;
       dialog.value=true;
    
      
       
    }
}

const mytree = ref(null);
const mytree1 = ref(null);
const mytree2 = ref(null);
onMounted(() => {
  SwipperData();
})
function myCurrent() {
  // console.log(mytree.value?.getCheckedNodes());
  form2.defaultPermTreeSelect = mytree.value?.getCheckedNodes()
}
function myCurrent1() {
  // console.log(mytree.value?.getCheckedNodes());
  form1.defaultPermTreeSelect = mytree1.value?.getCheckedNodes()
}
function myCurrent2() {
  // console.log(mytree.value?.getCheckedNodes());
  form.defaultPermTreeSelect = mytree2.value?.getCheckedNodes()
}

function SwipperData() {
  findSwipperApi()
    .then((res: any) => {
      console.log(res);

      if (res.data.code == 200) {
        tableData1.value = res.data.data
      }

    })
}

const defaultProps = {
  children: 'children',
  label: 'label',
}
const myData = [
  {
    id: 1,
    label: '组织管理'
  },
  {
    id: 2,
    label: '靶场管理'
  }
]


interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const load = (
  row: User,
  treeNode: unknown,
  resolve: (date: User[]) => void
) => {
  setTimeout(() => {
    resolve([
      // {
      //   id: 31,
      //   date: '2016-05-01',
      //   name: 'wangxiaohu',
      //   address: 'No. 189, Grove St, Los Angeles',
      // },
      // {
      //   id: 32,
      //   date: '2016-05-01',
      //   name: 'wangxiaohu',
      //   address: 'No. 189, Grove St, Los Angeles',
      // },
    ])
  }, 1000)
}
const tableData1 = ref([])
//   const tableData1:any =[
// {
//   "id": 1,
//   "rid": 1,
//   "describe": "轮播图",
//   "image": "http://range-file2023.oss-cn-chengdu.aliyuncs.com/2023/03/30/a7af43f5-c1a2-4563-921d-e914fd103b76.jpg",
//   "state": 0,
//   "time": null,
//   "rangeVo1s": {
//     "id": 1,
//     "name": "php反序列化"
//   }
// },
// {
//   "id": 2,
//   "rid": 2,
//   "describe": "靶场2的轮播图",
//   "image": "http://range-file2023.oss-cn-chengdu.aliyuncs.com/2023/03/30/a7af43f5-c1a2-4563-921d-e914fd103b76.jpg",
//   "state": 0,
//   "time": null,
//   "rangeVo1s": {
//     "id": 2,
//     "name": "实验二"
//   }
// }
//   ]


const formLabelWidth = '100px'
let timer: any


const dialog = ref(false)
const dialog1 = ref(false)
const dialog2 = ref(false)
const loading = ref(false)
// 删除
const drawer1 = ref(false)

const xiao = ref({})


const rules = reactive({
  // desc: [{ required: true, message: '' }],
  // miao: { required: true, message: '请输入权限描述' },
  name:{required:true},
  desc: { required: true ,message:"请输入轮播图描述"},
  guan: {required:true,message:"请选择关联靶场"}
})
const rules2 = reactive({
  name1: { required: true, message: '请输入菜单名称' },
  miao1: { required: true, message: '请输入权限描述' },
  top1: { required: true }
})


const form = reactive({
  desc: '',
  guan: ''
})
const form1 = reactive({
  name: '',
  region: '',
  defaultPermTreeSelect: []
})
const form2 = reactive({
  name: '',
  region: '',
  defaultPermTreeSelect: []
})


const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const onClick = (formEl: FormInstance | undefined) => {
  // if (!formEl) return
  // formEl.resetFields()
  form.desc='',
  form.guan='',
  drawerRef.value!.close()
  console.log(form);
}
const onClick1 = () => {
  drawerRef.value!.close()
  console.log(form1);
}
const onClick2 = () => {
  drawerRef.value!.close();
  console.log(form2);

}

const handleClose = (done: any) => {
  if (loading.value) {
    return
  }
  ElMessageBox.confirm('是否确认提交?')
    .then(() => {
      loading.value = true
      timer = setTimeout(() => {
        done()
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false
        }, 400)
      }, 2000)
    })
    .catch(() => {
      // catch error
    })
}

// function bian(v:any,n: any) {
//   console.log(n, 'nnn');
//   dialog2.value = true;
//   form2.name = n.date;
//   form2.region = n.auth
// }

const cancelForm = () => {
  form.desc='',
  form.guan='',
  loading.value = false
  dialog.value = false
  dialog1.value = false
  dialog2.value = false
  clearTimeout(timer)
}

const input = ref('')

// 删除
const handleDelete = (val: any) => {
  console.log("2" + val.name);

}
//删除
function del(n:any){
     console.log(n);
     
}

</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang='less'>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.user-content {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;

  .item {
    margin-bottom: 20px;



    .btn1 {
      width: 80px;
      height: 40px;
      line-height: 40px;
      border: none;
      margin-left: 20px;
      border-radius: 4px;
    }

  }

  .el-input {
    width: 200px;
    height: 40px;
  }
}
.classColor{
  color: red;
}
.addBtn {
  width: 130px;
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #139DFF;
  color: aliceblue;
  border-radius: 4px;
}

.btn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #139DFF;
  color: aliceblue;
  margin-left: 20px;
  border-radius: 4px;
}

.newAdd {
  margin-bottom: 20px;
}
.demo-drawer__footer{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>